﻿<!DOCTYPE html>
<html>
<head>
    <script src="/js/header.js"></script>
    <script src="/lib/multiselect/jquery.multi-select.js"></script>
    <link rel="stylesheet" type="text/css" href="/lib/multiselect/jquery.multi-select.css" />
</head>
<body class="bg_white">
    <body style="background-color: white;">
        <section class="container-fluid" style="background-color: white;">

            <ul class="nav nav-tabs m15_t" id="myTab">
                <li class="active"><a href="#home" data-toggle="tab">基本信息</a></li>
                <li><a href="#role" data-toggle="tab">权限</a></li>
            </ul>
            <form class="form-horizontal m15_t" id="form" onsubmit="return false;">
                <div class="tab-content">
                    <input type="hidden" id="id" name="id" value="0">
                    <div class="tab-pane fade in active" id="home">

                        <div class="form-group">
                            <label class="wd100 control-label">登陆名称：</label>
                            <div class="wd250">
                                <div style="margin-top:8px;">
                                    <span id="loginName" style="font-weight:bold;"></span>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="wd100 control-label">所属公司：</label>
                            <div class="wd250">
                                <div style="margin-top:8px;">
                                    <span id="companyName" style="font-weight:bold;"></span>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="wd100 control-label">密 码：</label>
                            <div class="input-group wd250">
                                <input class="form-control" type="password" name="oldPassWord" maxlength="20" placeholder="长度必须介于 6 和 20 之间"  autocomplete="off"/>
                                <span class="input-group-addon" style="margin-left:20px;" onclick="changeInputType(this);">
                                    <i class="glyphicon glyphicon-eye-open"></i>
                                </span>
                            </div>
                        </div>

                        <div class="form-group" id="divNewPwd">
                            <label class="wd100 control-label">新密码：</label>
                            <div class="input-group wd250">
                                <input class="form-control" type="password" name="newPassWord" maxlength="20" placeholder="长度必须介于 6 和 20 之间" autocomplete="off" />
                                <span class="input-group-addon" style="margin-left:20px;" onclick="changeInputType(this);">
                                    <i class="glyphicon glyphicon-eye-open"></i>
                                </span>
                            </div>
                        </div>
                        <div class="form-group" id="divAgainPwd">
                            <label class="wd100 control-label">确认密码：</label>
                            <div class="input-group wd250">
                                <input class="form-control" type="password" name="confirmNewPassWord" maxlength="20" placeholder="必须与新密码保持一致" autocomplete="off" />
                                <span class="input-group-addon" style="margin-left:20px;" onclick="changeInputType(this);">
                                    <i class="glyphicon glyphicon-eye-open"></i>
                                </span>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="wd100 control-label">联络电话：</label>
                            <div class="wd250">
                                <input class="form-control" type="text" name="telephone" maxlength="40" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="wd100 control-label">联络Email：</label>
                            <div class="wd250">
                                <input class="form-control" type="text" name="email" maxlength="50" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="wd100 control-label">说明：</label>
                            <div class="wd250">
                                <textarea style="height: auto;font-size: 12px;width: 100%;" type="text" id="description" name="description" maxlength="200"></textarea>
                            </div>
                        </div>
                    </div>
                    <!--权限-->
                    <div class="tab-pane fade" id="role">
                        <div class="form-group">
                            <label class="wd100 control-label">公司名称：</label>
                            <select name="uCompanyId" class="wd150">
                                <option value="">请选择</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="wd100 control-label">公司角色：</label>
                            <div class="wd325">

                            </div>
                        </div>
                        <div class="form-group">
                            <div style="margin-left:40px;">
                                <div class="f_l">
                                    <h5 class="wd150">未选择</h5>
                                    <select id='notelected' multiple='multiple' name="notelected" size="10" class="wd200" style="height:200px;"></select>
                                </div>
                                <div class="f_l m30_l">
                                    <h5 class="wd150">已选择</h5>
                                    <select id='selected' multiple='multiple' name="selectedRole" size="10" class="wd200" style="height:200px;"></select>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </form>

            <!--<ul class="nav nav-tabs m15_t">
                <div class="form-group" style="margin-top:25px;padding: 10px 15px;border-top: 1px solid #e5e6e7;">
                    <label class="wd100 control-label"></label>
                    <div class="wd250 m15_l">
                        <button class="btn btn-primary m50_l" onclick="return save();">保存</button>
                        <button class="btn btn-default m10_l" onclick="return cancel();">取消</button>
                    </div>
                </div>
            </ul>-->
        </section>
        
        <script type="text/javascript">

            var id = 0;

            var uCompanyId = $("select[name='uCompanyId']");
            var selectedRole = $("select[name='selectedRole']");
            var noSelectedRole = $("select[name='notelected']");

            var validator = null;

            $(function (e) {

                id = FlashPay.Util.GetQueryString("id");

                var cover = FlashPay.UI.Mask({
                    obj: $("body"),
                    opacity: 0.5
                });

                FlashPay.Util.Ajax({
                    type: "POST",
                    url: "/UserInfo/GetUserInfo?id=" + id,
                    data: null,
                    dataType: "json",
                    success: function (response) {
                        if (response != null && response.success) {

                            FlashPay.Util.SetInputVal("id", response.data.uId);
                            $("span#loginName").html(response.data.uLoginName);
                            $("span#companyName").html(response.data.companyName);

                            FlashPay.Util.SetInputVal("oldPassWord", '');
                            FlashPay.Util.SetInputVal("telephone", response.data.uTelephone);
                            FlashPay.Util.SetInputVal("email", response.data.uEmail);
                            FlashPay.Util.SetInputVal("description", response.data.uDescription);
                            $("#description").val(response.data.uDescription);

                            uCompanyId.empty();
                            uCompanyId.append("<option value=''>请选择</option>");

                            $.each(response.data.companyResponse, function (i, item) {
                                uCompanyId.append("<option value='" + item.companyID + "'>" + item.companyName + "</option >");
                            });

                            if (response.data.roleResponse != null) {
                                $.each(response.data.roleResponse, function (i, item) {
                                    selectedRole.append("<option value='" + item.rId + "'>" + item.rName + "</option >");
                                });
                            }
                            if (!response.data.isAuth) {
                                $("ul#myTab li").last().remove();
                            }
                            cover.Remove();

                        } else {
                            cover.Remove();
                        }
                    },
                    error: function (e) {
                        cover.Remove();

                        FlashPay.UI.Tip_short_warning("操作失败！请查看网络，请重试！");
                    }
                });


                $("select[name='uCompanyId']").change(function () {

                    var companyId = $(this).val();

                    var cover = FlashPay.UI.Mask({
                        obj: $("body"),
                        opacity: 0.5
                    });

                    noSelectedRole.html('');

                    FlashPay.Util.Ajax({
                        type: "get",
                        url: "/UserInfo/GetRoleByCompanyId",
                        data: { roleCompanyId: companyId },
                        dataType: "json",
                        contentType: "application/json",
                        success: function (response) {

                            cover.Remove();

                            if (response.success && response.success) {
                                if (response.data != null) {

                                    $.each(response.data, function (i, item) {
                                        noSelectedRole.append("<option value='" + item.rId + "'>" + item.rName + "</option >");
                                    });
                                }
                            }
                        },
                        error: function (response) {
                            FlashPay.UI.Tip_short_warning("操作失败！请查看网络，请重试！");
                        }
                    });
                });

                //新增
                $("#notelected").dblclick(function () {

                    var options = $(this).find("option:selected");

                    var exist = false;

                    $("#selected option").each(function () {
                        if (options.val() == $(this).val()) {
                            exist = true;
                        }
                    });

                    if (exist) {
                        FlashPay.UI.Tip_short_warning('"' + options.text() + '" 已存在');
                    } else {
                        selectedRole.append("<option value='" + options.val() + "'>" + options.text() + "</option >");
                    }
                })

                //移除
                $("#selected").dblclick(function () {
                    $(this).find("option:selected").remove();
                })

            });

            function save() {
                //if (!validator.form()) {
                //    return false;
                //}

                var userInfo = {};
                userInfo.Id = $('input[name="id"]').val();
                userInfo.oldPassWord = $('input[name="oldPassWord"]').val();
                userInfo.newPassWord = $('input[name="newPassWord"]').val();
                userInfo.confirmNewPassWord = $('input[name="confirmNewPassWord"]').val();
                userInfo.telephone = $('input[name="telephone"]').val();
                userInfo.email = $("input[name='email']").val();
                userInfo.description = $.trim($("#description").val());

                var roleIds = new Array();

                $("#selected option").each(function () {
                    roleIds.push($(this).val());
                });

                FlashPay.Util.Ajax({
                    type: "POST",
                    url: "/User/SaveOrEditUserInfo",
                    data: { userInfo: userInfo, roleIds: roleIds},
                    success: function (response) {
                        if (response.success) {
                            FlashPay.UI.DialogOpener().Tip_success(response.successMessage == null ? "操作成功！" : response.successMessage);
                            FlashPay.UI.DialogOpener().doSearch();
                            FlashPay.UI.CloseDialog()
                        } else {
                            FlashPay.UI.Tip_short_danger(response.errorMessage == null ? "操作失败！" : response.errorMessage);
                        }
                    }
                });
            }

            function changeInputType(obj) {

                var that = $(obj).prev();
                if (that.attr('type') == 'text') {
                    that.attr('type', 'password');
                    $(obj).find("i").removeClass("glyphicon-eye-open");
                    $(obj).find("i").addClass("glyphicon-eye-close");
                } else {
                    that.attr('type', 'text');
                    $(obj).find("i").removeClass("glyphicon-eye-close");
                    $(obj).find("i").addClass("glyphicon-eye-open");
                }

            }
        </script>
    </body>
</html>